<template>
	<view class="community">
		<scroll-view class="left" scroll-y="true">
			<view :class="active===index?'active':''" @click="communityClick(item, index)" v-for="(item, index) in typeList">{{item.name}}</view>
		</scroll-view>
		<scroll-view class="right" scroll-y="true">			
			<view class="pic">
				<image class="image" src="/static/banner/q2.jpg"></image>
				<text>轻松生活，从好的行李箱开始轻松生活，从好的行李箱开始</text>
			</view>
			<view class="pic">
				<image class="image" src="/static/banner/q2.jpg"></image>
				<text>轻松生活，从好的行李箱开始</text>
			</view>
			<view class="pic">
				<image class="image" src="/static/banner/q2.jpg"></image>
				<text>轻松生活，从好的行李箱开始</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList:[],
				active:0
			}
		},
		onLoad() {
			console.log('--onload--start')
			this.fetchCommunity()
			console.log('--end--start')
		},
		methods: {
			communityClick(item, index) {
				this.active = index
			},
			fetchCommunity() {
				uni.request({
				  url: '/pages/community/community.json', // 你的JSON文件地址
				  method: 'GET',
				  success: (res) => {
				    if (res.statusCode === 200) {
				      // 请求成功，处理数据
					  console.log("banner", res.data);
					  this.typeList = res.data.community.typelist
				    } else {
				      // 请求失败处理
				      console.error('请求失败1', res.statusCode);
				    }
				  },
				  fail: (err) => {
				    // 请求发生错误处理
				    console.error('请求出错2:', err);
				  }
				});
			},
		}
	}
</script>

<style lang="scss">
	page{
		height:100%;
	}
	.community{
		height:100%;
		display:flex;
		.left{
			width:200rpx;
			height:100%;
			border-right:1px solid #eee;
			text-align:center;
			font-size: 30rpx;
			
			view {
				height:60px;
				line-height:60px;
				color: #333;
				border-top: 1px solid #eee;
			}
			
			.active {
				color:#fff;
				background:#e2211c;
			}
		}
		.right{
			width:520rpx;
			height:100%;
			margin:10rpx auto;
			.pic{
				.image{
					width:520rpx;
					height:520rpx;
					border-radius: 5px;
				}
				text{
					font-size:30rpx;
					line-height:60rpx;
				}
			}
		}
	}
</style>
